<template>
	<view>
		<!-- 轮播图 -->
		<swiper class="swiper" circular autoplay interval="3000" duration="1000">
			<block v-for="(item,index) in bannerlist" :key="index">
				<swiper-item>
					<image class="swiper-item" :src="item.img"></image>
				</swiper-item>
			</block>
		</swiper>
		
		<!-- 分类 -->
		<scroll-view class="classify" scroll-x="true">
			<block v-for="(item,index) in classify" :key="index">
				<view class="classify_box" :class="index==classifyIndex?'classify_active':''" @click="selectClassify(index)">
					{{item}}
					<view class="classify_active_border" v-if="index==classifyIndex"></view>
				</view>
			</block>
		</scroll-view>
		
		<!-- tab -->
		<block>
			<scroll-view class="tab" scroll-x="true" :show-scrollbar="false">
				<block v-for="(item,index) in tabList" :key="index">
					<view class="tab_box" :class="index==tabIndex?'tab_active':''" @click="selectTab(index)">
						{{item}}
					</view>
				</block>
			</scroll-view>
		</block>
				
		<block v-for="(item,index) in list" :key="index">
			<view class="box">
				<view class="box_user">
					<image src="https://img.zzplc.net/stc/girl.jpg" class="box_user_avatar"></image>
					<view class="box_user_l">
						<view class="box_user_l_name">御芙兰三通大师</view>
						<view class="box_user_l_time">
							<image src="/static/time.png" class="box_user_l_time_img"></image>
							<view class="box_user_l_time_text">{{item.ctime}} 上传</view>
						</view>
					</view>
				</view>
				<view class="box_text"><text>{{item.word}}</text></view>
				<block v-if="item.ftype==0">
					<view class="box_img">
						<block v-for="(items,indexs) in item.imgurl" :key="indexs">
							<image :src="items" lazy-load mode="aspectFill" class="box_img_img" @click="previewImage(items,index)"></image>
						</block>
					</view>
				</block>
				<block v-if="item.ftype==1">
					<video :id="`video${item.videourl}`" @play='videoPlay(item.videourl)' @fullscreenchange="fullscreenchange" :src="item.videourl" object-fit="cover" class="box_video"></video>
					<!-- <video :src="item.videourl" class="box_video" object-fit="fill"></video> -->
				</block>
				<view class="box_f">
					<view class="box_f_l" @click="copyText(item.word)">复制文案</view>
					<view class="box_f_r" @click="download(item.ftype,index)">{{item.ftype==0?'下载图片':'下载视频'}}</view>
				</view>
			</view>
		</block>
		
		<!-- 占位图 -->
		<image src="/static/nothing.jpg" mode="widthFix" style="width: 750rpx;margin-top: 30rpx" v-if="!list.length"></image>
	</view>
</template>

<script>
	let page = 1
	let lastPage = false
	import { requestData } from 'util/request.js'
	export default {
		data() {
			return {
				list: [],
				playId: 0,
				ctype: '',
				bannerlist: [],
				classify: ['图片','视频','发圈','文案','专题'],
				classifyIndex: 2,
				tabList: ['拓客类','店销类','招商类','美博会'],
				tabIndex: null,
				showTrue: true,
				videoContext: '',
			};
		},
		
		// 下拉刷新
		onPullDownRefresh() {
			let that = this
			
			// that.list = []
			
			setTimeout(function () {
				that.list = []
				page = 1
				lastPage = false
				that.request()
				uni.stopPullDownRefresh();
			}, 1000);
		},
		
		// 下一页
		onReachBottom(){
			let that = this
			
			if(!lastPage){
				that.request()
			}
		},
		
		onLoad() {
			let that = this
			
			uni.request({
				url: getApp().globalData.url + '/fp/bannerlist',
				method: 'POST',
				success(res) {
					that.bannerlist = res.data.data
				}
			})
			
			
		},
		
		// onHide() {
		// 	// this.showTrue = true
		// 	console.log(1234)
		// },
		
		onShow() {
			let that = this
			
			if(that.showTrue){
				that.list = []
				that.tabIndex = null
				page = 1
				lastPage = false
				that.request()
			}else{
				that.showTrue = true
			}
		},
		
		// onHide() {
		// 	let that = this
			
		// 	console.log(that.playId,'onHide-----that.playId')
		// 	if (that.playId !== 0) {
		// 		let videoContext = uni.createVideoContext(`video${that.playId}`)
		// 		videoContext.pause()
		// 		that.playId = 0
		// 	}
		// },
		
		methods: {
			// 选择分类
			selectClassify(index){
				let that = this
				
				if(index==2){
					return false
				}
				uni.reLaunch({
					url: '/pages/index/index?classIndex='+index
				})
			},
			
			// 选择tab
			selectTab(index){
				let that = this
				
				if(index == that.tabIndex){
					return false
				}
				that.list = []
				page = 1
				lastPage = false
				that.tabIndex = index
				that.request()
			},
			
			// 图片预览
			previewImage(imgurl,index){
				let that = this
				let img = that.list[index].imgurl
				that.showTrue = false
				uni.previewImage({
					urls: img,
					current: imgurl
				})
			},
			
			// 视频播放
			videoPlay(id) {
				let that = this
				
				that.videoContext = uni.createVideoContext(`video${id}`)
				that.videoContext.requestFullScreen()
			 //    if (that.playId !== 0 && that.playId != id) {
			 //        let videoContext = uni.createVideoContext(`video${that.playId}`)
				// 	videoContext.pause()
			 //    }
				// that.playId = id
			},
			
			// 进入/退出全屏
			fullscreenchange(e){
				let that = this
				
				if(!e.detail.fullScreen){
					that.videoContext.pause()
				}
			},
			
			// 点击下载
			download(ftype,index){
				let that = this
				
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success() {
					  // 用户已授权，可以继续执行保存图片到相册的操作
						// console.log('授权成功');
						uni.showLoading({title:'保存中……'})
						if(ftype==1){
							that.videoDetail(that.list[index].videourl)
						}else{
							that.downloadImage(that.list[index].imgurl)
						}
					},
					fail() {
					  // 用户拒绝授权，可引导用户手动去设置打开权限
						uni.showModal({
							title: '提示',
							content: '此功能需要保存图片到您的相册，请在设置中允许访问相册。',
							success: function(modalRes) {
								if (modalRes.confirm) {
									uni.openSetting({
										success: function(settingRes) {
											if (settingRes.authSetting['scope.writePhotosAlbum']) {
												// 用户在设置中打开了相册授权
												console.log('设置中授权成功');
											}
										}
									})
								}
							}
						});
					}
				});
			},
			
			downloadImage(imgurl){
				let that = this
				
				const imgurls = imgurl.map((item)=>{
					return new Promise((reslove,reject) => {
						reslove(that.downloadImg(item))
					})
				})
				
				Promise.all(imgurls).then(item=>{
					// console.log(item)
					uni.hideLoading()
					uni.showToast({
						title: '下载成功！'
					})
				}).catch(err=>{
					uni.hideLoading()
				})
			},
			
			// 下载
			downloadImg(url){
				let that = this
				
				return new Promise((reslove,reject)=>{
					uni.getImageInfo({
						src: url,
						success: function (image) {
							uni.saveImageToPhotosAlbum({
								filePath: image.path,
								success: function () {
									reslove(url)
								},
								fail(err) {
									reject(err)
								}
							});
						}
					});
				})
			},
			
			// 视频下载
			videoDetail(videoUrl){
				let that = this
				
				uni.showLoading({title:'保存中……'})
				uni.downloadFile({
					url: videoUrl, // 此为视频下载地址
					success: (res) => {
						if (res.statusCode === 200) {
							uni.compressVideo({ // 压缩下载返回的地址
								src: res.tempFilePath, // 下载成功的临时路径
								quality:'high',
								success: (compress) => {
									console.log(compress)
									uni.saveVideoToPhotosAlbum({
										filePath: compress.tempFilePath,
										success: (errMsg)=>{
											uni.hideLoading()
											uni.showToast({
												mask: true,
												title: '保存成功'
											});
										},
										fail(err) {
											uni.hideLoading()
										}
									});
								}
							})
						}
					}
				})
			},
			
			// 复制文本
			copyText(text){
				uni.setClipboardData({
					data: text
				});
			},
			
			request(){
				let that = this
				
				let param = {
					pagecurrent: page,
					pagesize: 10,
					ctype: that.tabIndex!= null ? that.tabIndex : ''
				}
				requestData('/fp/friendlist',param).then(res=>{
					let list = res.data.list
					const url = list.map((item,i)=>{
						if(item.ftype == 0){
							let items = item.imgurl
							items = items.substring(1,items.length)
							list[i].imgurl = items.split(/[;]/)
						}
					})
					if(that.list.length){
						that.list = that.list.concat(list)
					}else{
						that.list = list
					}
					if(res.data.lastPage){
						lastPage = true
					}else{
						page++
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #ECECEC;
	}
	
	.swiper{
		width: 750rpx;
		height: 527rpx;
		overflow: hidden;
	}
	.swiper-item{
		width: 750rpx;
		height: 527rpx;
	}
	
	// 分类
	.classify{
		width: 750rpx;
		height: 126rpx;
		white-space: nowrap;
		// background: #FFFFFF;
		background: #BE2B3E;
		
		::-webkit-scrollbar{
		    width: 0;
		    height: 0;
		    color: transparent;
		    display:none;
		}
		
		&_box{
			// float: left;
			display: inline-block;
			padding: 44rpx 34rpx 0;
			height: 40rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 44rpx;
			// color: #000000;
			color: #FFFFFF;
			line-height: 40rpx;
		}
		&_active{
			position: relative;
			font-weight: bold;
			font-size: 44rpx;
			color: #FAD886;
			
			&_border{
				position: absolute;
				bottom: -18rpx;
				left: 50%;
				transform: translate(-50%);
				width: 60rpx;
				height: 5rpx;
				background: #FAD886;
			}
		}
	}
	
	// tab
	.tab{
		margin-top: 30rpx;
		width: 750rpx;
		height: 68rpx;
		white-space: nowrap;
		overflow: hidden;
		
		::-webkit-scrollbar{
		    width: 0;
		    height: 0;
		    color: transparent;
		    display:none;
		}
		
		&_box{
			// float: left;
			display: inline-block;
			margin-left: 30rpx;
			width: 150rpx;
			height: 68rpx;
			background: #009C8F;
			border-radius: 15rpx;
			text-align: center;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 68rpx;
		}
		&_active{
			background: #BE2B3E;
		}
	}
	
	.box{
		margin: 20rpx 0;
		width: 750rpx;
		background: #FFFFFF;
		overflow: hidden;
		
		&_user{
			padding: 30rpx;
			height: 115rpx;
			background: #03AEA5;
			overflow: hidden;
			
			&_avatar{
				float: left;
				width: 115rpx;
				height: 115rpx;
				border-radius: 12rpx;
			}
			&_l{
				float: left;
				margin-left: 30rpx;
				overflow: hidden;
				
				&_name{
					margin-top: 14rpx;
					height: 40rpx;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 40rpx;
					color: #FFFFFF;
					line-height: 40rpx;
				}
				&_time{
					margin-top: 25rpx;
					height: 28rpx;
					overflow: hidden;
					
					&_img{
						float: left;
						margin-top: 3rpx;
						width: 23rpx;
						height: 23rpx;
						border-radius: 50%;
					}
					&_text{
						float: left;
						margin-left: 8rpx;
						height: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #FFFFFF;
						line-height: 28rpx;
					}
				}
			}
		}
		&_text{
			margin: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 34rpx;
			color: #333333;
			line-height: 50rpx;
			overflow: hidden;
		}
		&_img{
			margin: 30rpx;
			overflow: hidden;
			
			&_img{
				float: left;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
				width: 223rpx;
				height: 223rpx;
				border-radius: 18rpx;
				
				&:nth-child(3n) {
					margin-right: 0rpx;
				}
			}
		}
		&_video{
			margin: 0 30rpx;
			width: 690rpx;
			height: 388rpx;
			border-radius: 18rpx;
			overflow: hidden;
		}
		&_f{
			margin: 30rpx;
			height: 97rpx;
			overflow: hidden;
			
			&_l{
				float: left;
				width: 330rpx;
				height: 97rpx;
				background: linear-gradient(-70deg, #D22D00, #F35919);
				background: #D3CA47;
				border-radius: 18rpx;
				text-align: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				line-height: 97rpx;
				overflow: hidden;
			}
			&_r{
				float: right;
				width: 330rpx;
				height: 97rpx;
				background: linear-gradient(-70deg, #D22D00, #F35919);
				background: #BE2B3E;
				border-radius: 18rpx;
				text-align: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 97rpx;
				overflow: hidden;
			}
		}
	}
</style>
